How to add a stylish fb popup like box to blogger

Hello Friend Today I am Going To tell You how to add a fb popup like box to blogger 

1. First open www.blogger.com 
2. Then sign in your blogger account
3. Then go to your blog dashboard 
4. the click layout tab
5. then click Html/javascript
6. then copy and paste the code below

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

<script src="http://exeideasinternational.googlecode.com/files/jquery.colorbox-min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function(){

if (document.cookie.indexOf('visited=false') == -1)

{

var fifteenDays = 1000*60*60*24*1;

var expires = new Date((new Date()).valueOf() + fifteenDays);

document.cookie = "visited=true;expires=" + expires.toUTCString();

$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});

}

});

</script>

<style type="text/css">

/*

ColorBox v1.3.16

(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)

*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}

#cboxOverlay{position:fixed; width:100%; height:100%;}

#cboxMiddleLeft, #cboxBottomLeft{clear:left;}

#cboxContent{position:relative;}

#cboxLoadedContent{overflow:auto;}

#cboxTitle{margin:0;}

#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

.cboxPhoto{float:left; margin:auto; border:0; display:block;}

.cboxIframe{width:100%; height:100%; display:block; border:0;}

/*

User Style:

Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML.

*/

#cboxOverlay{background:#000;opacity:0.5 !important;}

#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);}

#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWg37GHk7XeCJFE1eirQyHubxp8x6H9hYhG_AEFORfr4qzEYah-iSo9P9NASa4VtJBTCnMAN9jNE-VRgrK0IpO5NATvk2rCuYqGLH5keaCoiDmRyCRKTRsWpstfaNCv-3hjTvoxld7EU/s1600/controls.png) no-repeat 0 0;}

#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRzi82cBUaXwf8weRyOxJK-1k2rc6qxWt5ztDZD-HfFBwKGIygj9kvupkXsVU1LXmncy8LJ3cvNdJ3VH2PVgkyUCqjHBDA_JVG5r0Mb4pCBlGmBcMFbMc1-aER-rbP0u2Gx29PXHSu_UQ/s400/border.png) repeat-x top left;}

#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWg37GHk7XeCJFE1eirQyHubxp8x6H9hYhG_AEFORfr4qzEYah-iSo9P9NASa4VtJBTCnMAN9jNE-VRgrK0IpO5NATvk2rCuYqGLH5keaCoiDmRyCRKTRsWpstfaNCv-3hjTvoxld7EU/s1600/controls.png) no-repeat -36px 0;}

#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWg37GHk7XeCJFE1eirQyHubxp8x6H9hYhG_AEFORfr4qzEYah-iSo9P9NASa4VtJBTCnMAN9jNE-VRgrK0IpO5NATvk2rCuYqGLH5keaCoiDmRyCRKTRsWpstfaNCv-3hjTvoxld7EU/s1600/controls.png) no-repeat 0 -32px;}

#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRzi82cBUaXwf8weRyOxJK-1k2rc6qxWt5ztDZD-HfFBwKGIygj9kvupkXsVU1LXmncy8LJ3cvNdJ3VH2PVgkyUCqjHBDA_JVG5r0Mb4pCBlGmBcMFbMc1-aER-rbP0u2Gx29PXHSu_UQ/s400/border.png) repeat-x bottom left;}

#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWg37GHk7XeCJFE1eirQyHubxp8x6H9hYhG_AEFORfr4qzEYah-iSo9P9NASa4VtJBTCnMAN9jNE-VRgrK0IpO5NATvk2rCuYqGLH5keaCoiDmRyCRKTRsWpstfaNCv-3hjTvoxld7EU/s1600/controls.png) no-repeat -36px -32px;}

#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWg37GHk7XeCJFE1eirQyHubxp8x6H9hYhG_AEFORfr4qzEYah-iSo9P9NASa4VtJBTCnMAN9jNE-VRgrK0IpO5NATvk2rCuYqGLH5keaCoiDmRyCRKTRsWpstfaNCv-3hjTvoxld7EU/s1600/controls.png) repeat-y -175px 0;}

#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWg37GHk7XeCJFE1eirQyHubxp8x6H9hYhG_AEFORfr4qzEYah-iSo9P9NASa4VtJBTCnMAN9jNE-VRgrK0IpO5NATvk2rCuYqGLH5keaCoiDmRyCRKTRsWpstfaNCv-3hjTvoxld7EU/s1600/controls.png) repeat-y -211px 0;}

#cboxContent{background:#fff; overflow:visible;}

#cboxLoadedContent{margin-bottom:5px;}

#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXKQIo23FxVUOoj1HMopArlhiG24FUBqj-_gsLuYYiVYxZ6jrN_-0IWQ0Kke59S46c4XgYvq1tme47IqAONP8BHbvtZhHl9A1WggIiMO9GOhRJUU7tsxTFSu7-xRwDuOMWN2sf8AT7CGg/s400/loadingbackground.png) no-repeat center center;}

#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtgXI3Vm8PQeuEjAqmkuUA6TnTgqtKlHDXwUGT9o7QTuxwvBklke3yJzzpsQTPA8e7GRZ07g8-dujHnQErU20Re2SgdAchtemLvT09FUU5hoMFlCRl67gdesiuXSE-grq8bePdSA_RI0o/s400/loading.gif) no-repeat center center;}

#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}

#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWg37GHk7XeCJFE1eirQyHubxp8x6H9hYhG_AEFORfr4qzEYah-iSo9P9NASa4VtJBTCnMAN9jNE-VRgrK0IpO5NATvk2rCuYqGLH5keaCoiDmRyCRKTRsWpstfaNCv-3hjTvoxld7EU/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}

#cboxPrevious{left:0px; background-position: -51px -25px;}

#cboxPrevious.hover{background-position:-51px 0px;}

#cboxNext{left:27px; background-position:-75px -25px;}

#cboxNext.hover{background-position:-75px 0px;}

#cboxClose{right:0; background-position:-100px -25px;}

#cboxClose.hover{background-position:-100px 0px;}

.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}

.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}

.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}

.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*-----------------------------------------------------------------------------------*/

/* Facebook Likebox popup For Blogger

/*-----------------------------------------------------------------------------------*/

#mdfb {font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;}

#mdfb a, #mdfb a:hover, #mdfb a:visited {text-decoration:none;}

.mdbox-title {background:#000;color: #fff;font-size: 20px !important;font-weight: bold;margin: 10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow: 5px 5px 5px #CCCCCC;padding:10px;line-height:25px; font-family:arial !important;}

</style>

<div style='display:none'>

<div id='exestylepopups' style='padding:10px; background:#fff;'>

<center><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below...</h3></center>

<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/pages/SyedTaufiqAli/407097922671671&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center><p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.syedtaufiqali.blogspot.com/2012/08/how-to-add-stylish-fb-popup-like-box-to.html ">Get This</a></p>

</div>

</div>

     Note 

Change my facebook page url to yours facebook page url which i colour in red

Every Thing Done